<template>
    <div style="height: 100%;">
      <div class="friendName">{{friendInfo.username}}</div>
      <GeminiScrollbar ref="chatMain" class="my-scroll-bar" id='msgContain'>
        <div id="dialogue_box">
        <el-button v-if="showMoreBtn" type="text" @click="showMoreMsg">获取更多</el-button>
          <div v-if="!showMoreBtn" style="height: 24px"> <label class="nomore"><i class="el-icon-warning-outline"></i>没有更多了</label></div>
          <div class="messages" v-for="(message,index) of messageList.slice(showMsgCount)">
            <div v-if="index%15 ===0" class="msgTime">{{getTime(message.time)}} </div>
            <single-message :message="message" :friend-info="friendInfo" ></single-message>
          </div>
        <div style="height: 30px;width: 100%"></div>
        </div>
      </GeminiScrollbar>
      <div class="inputOptions">
        <!--          // 下载到本地-->
        <el-tooltip class="item" effect="light" content="下载消息记录到本地" placement="top-end">
          <el-button type="text" class="el-icon-download" style="float: right;font-size: 30px; margin-right: 10px;margin-top: 5px;font-size: 20px" @click="downloadToLocal"></el-button>
        </el-tooltip>
        <el-dialog
          placement="top"
          width="260px"
          :visible.sync="popoverVisible">
          <p>即将删除与该好友的所有消息</p>
          <el-button size="mini" type="text" @click="visible = false">取消</el-button>
          <el-button type="primary" size="mini" @click="conFirmDeleteMsg">确定</el-button>

        </el-dialog>
        <el-tooltip class="item" effect="light" content="删除所有消息" placement="top-end"  slot="reference">
          <el-button type="text" class="el-icon-delete" style="float: right;font-size: 30px; margin-right: 10px;margin-top: 5px;font-size: 20px" @click="deleteMsg"></el-button>
        </el-tooltip>
      </div>
      <GeminiScrollbar :style="{height:(windowHeight*0.3-50)+'px'}" class="inputContain">
        <el-input
          type="textarea"
          :autosize="inputAreaAutoSize"
          v-model="inputText">
        </el-input>
      </GeminiScrollbar>
        <div class="bottomBtns">
          <el-button type="success" round @click="toSendPrivate" >发送</el-button>
        </div>
    </div>
</template>

<script>
import SingleMessage from './SingleMessage'
import common from'./common'
import timeFormat from './TimeFormat'
export default {
  name: 'MessageContain',
  components: {
    SingleMessage
  },
  props: ['windowHeight', 'messageList', 'friendInfo', 'stompClient', 'allMessages'],
  data () {
    return {
      inputText: '',
      inputAreaAutoSize: {
        minRows: Number((this.windowHeight * 0.3 - 110) / 23)
      },
      localStorage: window.localStorage,
      showMsgCount: -20,
      showMoreBtn: true,
      popoverVisible:false
    }
  },
  methods: {
    toSendPrivate () {
      if (this.inputText === '') {
        this.$message('请输入文本内容')
        return
      }
      console.log('正在发送...')
      var that = this
      var headers = {
        // uid: window.localStorage.uid
      }
      this.messageList.push(
        {
          sender: 0,
          type: 'text',
          content: that.inputText,
          time: common('yyyy/MM/dd hh:mm:ss', new Date())
        }
      )
      // 如果是第一条消息
      if(this.messageList.length === 1)
      {
        this.allMessages.push(
          {
            targetId: that.friendInfo.uid,
            unReadCount : 0,
            messages: that.messageList
          }
        )
      }
      this.stompClient.send('/app/sendPrivateMessage', headers, JSON.stringify({fromId: that.localStorage.uid, toId: that.friendInfo.uid, type: 'text', content: that.inputText}))
      this.inputText = '',
        this.$emit('sortMsgs');
    },
    // 获取更多消息
    showMoreMsg(){
      this.showMsgCount -= 15
      if(this.messageList.length<= -1*this.showMsgCount){
        this.showMoreBtn = false
      }
    },
    getTime(time){
      return timeFormat(time)
    },
    downloadToLocal(){
      var FileSaver = require('file-saver');
      var content = JSON.stringify(this.messageList);
      var blob = new Blob([content ], {type: "text/plain;charset=utf-8"});
      FileSaver.saveAs(blob,"与"+ this.friendInfo.username+"的对话.txt");
    },
    deleteMsg(){
      this.popoverVisible = true
    },
    conFirmDeleteMsg(){
      this.$emit("deleteMsg", this.friendInfo.uid)

    }
  },
  watch: {
    windowHeight (val, oldVal) {
      this.inputAreaAutoSize = {
        minRows: Number((val * 0.3 - 110) / 23)
      }
    },
  },
  created () {
    this.$nextTick(function(){
      var div = document.getElementById('dialogue_box');
      div.scrollTop = div.scrollHeight;
    })
  }
}
</script>

<style scoped>
.friendName{
  padding: 10px;
  font-size: 20px;
  font-weight: bold;
  border-style: solid; border-width: 0 0 1px 0; border-color: #E5E9F2;
  background-color: #f9f8f7;
}
  .messages{
    padding: 10px;
  }
  .inputContain{
    border-style: solid; border-width: 2px 0 0 0; border-color: #E5E9F2;
    overflow: auto;
  }
  el-input{
    border-radius: 0;
  }
  .bottomBtns{
    position: absolute;
    bottom: 10px;
    right: 20px;
  }
  .my-scroll-bar{
    height: 70%;
    background-color: white;
  }
  .inputOptions{
    width: 100%;
    height: 50px;
    background-color: #f9f8f7;
    border-style: solid;
    border-color: #E5E9F2;
    border-width: 1px 0 0 0;
  }
  .msgTime{
    clear: both;
    height: 17px;
    margin: auto;
    width: 100px;
    background-color: #c0c4cc;
    border-radius: 10px;
    color: white;
    font-size: 13px;
  }
  .nomore{
    font-size: 12px;
    font-weight: bold;
    color: #FF5722;
    background-color: white;
    opacity: 0.9;
    border-radius: 10px;
    padding: 3px 6px;
  }
</style>
